define(['./config'], () => {
  class tab {
    constructor() {
      this.content = document.querySelector('.x-swiper-container')
      this.content1 = $('.x-swiper-container')
      this.next1 = document.querySelector('.x-swiper-next')
      this.prev1 = document.querySelector('.x-swiper-prev')
      this.swich = document.querySelectorAll('.switch-box>div')
      this.sceond = document.querySelector('.second')
      this.list = document.querySelector('.rank-list-container')
      this.inint()
    }
    inint() {
      this.myRequest()
      this.request()
    }
    myRequest() {
      pAjax({
        url: '../data/game.json'
      }).then((res) => {

        this.resert(res)
        this.slide()
      })
    }
    resert(dat) {
      let data = JSON.parse(dat)
      data.forEach((game) => {
        this.content.innerHTML += `
                <div class="x-swiper-box">
                    <a href="#">
                        <div class="produce-info">
                            <div class="circle">

                            </div>
                            <div class="time">
                                2.24
                                首发
                            </div>
                        </div>
                        <div class="produce">
                            <img class="cover" src="${game.imageUrl}" alt="">
                            <div class="info-box">
                                <div class="game-name">${game.gameName}</div>
                                <div class="game-tags">
                                    <span class="tag-item">${game.gameTags[0]}</span>
                                    <span class="tag-item">${game.gameTags[1]}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                `
      })
    }
    slide() {
      let sds = 0
      let that = this
      that.next1.onclick = () => {
        let position = 1197.245
        sds -= position
        if (sds <= -28733.9) {
          console.log(sds);
          that.next1.style.cursor = 'not-allowed'
          return
        } else {
          this.content1.stop().animate({
            left: sds
          }, 1000);
        }
      }

      that.prev1.onclick = () => {

        let position = 1197.245
        sds += position
        console.log(sds)
        if (sds = 0) {

          that.prev1.style.cursor = 'not-allowed'
          return
        } else {
          this.content1.stop().animate({
            left: sds
          }, 1000);
        }

      }
    }
    request() {
      pAjax({
        url: '../data/info.json'
      }).then((res) => {

        this.switchList(res)
      })
    }
    switchList(data) {
      let dat = JSON.parse(data)
      console.log(dat);



      dat.forEach((item) => {

        this.list.innerHTML += `
     <div class="game-type annual-wrap">
                <div class="type-list-title">热搜排行榜</div>
                <div class="list-label">
                    <span>排名</span>
                    <span>游戏信息</span>
                    <span>搜索指数</span>
                </div>
                <div class="type-list-content">
                    <div class="rank-list-item">
                        <a href="" class="item-link-box ">
                            <div class="status-item">
                                <span class="rank-query">1</span>
                                <div class="cover-img">
                                    <img src="${item[0].gameIcon}" alt="">
                                </div>
                                <div class="game-info-box">
                                    <div class="top">
                                        <div class="game-name">${item[0].gameName}</div>
                                        <div class="top-middle">${item[0].gameNameEn}</div>
                                    </div>
                                    <div class="middle">
                                        <div class="middle-box">
                                            <div class="font">${item[0].gameTypes}</div>
                                            <div class="date">2014-9-3</div>
                                        </div>
                                        <div class="link-box">进入专区</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="divbottom"></div>
                    </div>
                    <div class="rank-list-item d">
                        <a href="" class="item-link-box ">
                            <div class="status-item">
                                <span class="rank-query">1</span>
                                <div class="cover-img">
                                    <img src="${item[1].gameIcon}" alt="">
                                </div>
                                <div class="game-info-box">
                                    <div class="top">
                                        <div class="game-name">${item[1].gameName}</div>
                                        <div class="top-middle">${item[1].gameNameEn}</div>
                                    </div>
                                    <div class="middle">
                                        <div class="middle-box">
                                            <div class="font">${item[1].gameTypes}</div>
                                            <div class="date">2014-9-3</div>
                                        </div>
                                        <div class="link-box">进入专区</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="divbottom"></div>
                    </div>
                    <div class="rank-list-item c">
                        <a href="" class="item-link-box ">
                            <div class="status-item">
                                <span class="rank-query">1</span>
                                <div class="cover-img">
                                    <img src="${item[2].gameIcon}" alt="">
                                </div>
                                <div class="game-info-box">
                                    <div class="top">
                                        <div class="game-name">${item[2].gameName}</div>
                                        <div class="top-middle">${item[2].gameNameEn}</div>
                                    </div>
                                    <div class="middle">
                                        <div class="middle-box">
                                            <div class="font">${item[2].gameTypes}</div>
                                            <div class="date">2014-9-3</div>
                                        </div>
                                        <div class="link-box">进入专区</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="divbottom"></div>
                    </div>
                </div>
            </div>
            
     `
      })






      for (let i = 0; i < this.swich.length; i++) {
        this.swich[i].onclick = () => {
          for (let j = 0; j < this.swich.length; j++) {
            this.swich[j].className = 'tab-item'

          }
          this.swich[i].className += ' active'
          let game = null
          let that = this

          this.sceond.addEventListener('click', (e) => {
            e = e || window.event
            let target = e.target || e.srcElement


            if (target.innerText == '单机游戏') {
              this.list.innerHTML = ''
              dat.forEach((item) => {

                this.list.innerHTML += `
             <div class="game-type annual-wrap">
                        <div class="type-list-title">热搜排行榜</div>
                        <div class="list-label">
                            <span>排名</span>
                            <span>游戏信息</span>
                            <span>搜索指数</span>
                        </div>
                        <div class="type-list-content">
                            <div class="rank-list-item">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[0].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[0].gameName}</div>
                                                <div class="top-middle">${item[0].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[0].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item d">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[1].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[1].gameName}</div>
                                                <div class="top-middle">${item[1].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[1].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item c">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[2].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[2].gameName}</div>
                                                <div class="top-middle">${item[2].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[2].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                        </div>
                    </div>
                    
             `
              })
            }

            if (target.innerText == '网络游戏') {
              this.list.innerHTML = ''
              dat.forEach((item) => {

                this.list.innerHTML += `
             <div class="game-type annual-wrap">
                        <div class="type-list-title">新游榜</div>
                        <div class="list-label">
                            <span>排名</span>
                            <span>游戏信息</span>
                            <span>搜索指数</span>
                        </div>
                        <div class="type-list-content">
                            <div class="rank-list-item">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[2].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[2].gameName}</div>
                                                <div class="top-middle">${item[2].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[2].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item d">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[1].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[1].gameName}</div>
                                                <div class="top-middle">${item[1].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[1].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item c">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[0].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[0].gameName}</div>
                                                <div class="top-middle">${item[0].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[0].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                        </div>
                    </div>
                    
             `
              })
            }




            if (target.innerText == '网页游戏') {
              this.list.innerHTML = ''
              dat.forEach((item) => {

                this.list.innerHTML += `
             <div class="game-type annual-wrap">
                        <div class="type-list-title">下载榜</div>
                        <div class="list-label">
                            <span>排名</span>
                            <span>游戏信息</span>
                            <span>搜索指数</span>
                        </div>
                        <div class="type-list-content">
                            <div class="rank-list-item">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[1].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[1].gameName}</div>
                                                <div class="top-middle">${item[1].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[1].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item d">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[2].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[2].gameName}</div>
                                                <div class="top-middle">${item[2].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[2].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                            <div class="rank-list-item c">
                                <a href="" class="item-link-box ">
                                    <div class="status-item">
                                        <span class="rank-query">1</span>
                                        <div class="cover-img">
                                            <img src="${item[0].gameIcon}" alt="">
                                        </div>
                                        <div class="game-info-box">
                                            <div class="top">
                                                <div class="game-name">${item[0].gameName}</div>
                                                <div class="top-middle">${item[0].gameNameEn}</div>
                                            </div>
                                            <div class="middle">
                                                <div class="middle-box">
                                                    <div class="font">${item[0].gameTypes}</div>
                                                    <div class="date">2014-9-3</div>
                                                </div>
                                                <div class="link-box">进入专区</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="divbottom"></div>
                            </div>
                        </div>
                    </div>
                    
             `
              })
            }







          }, false)
        }
      }
    }

  }
  return tab


});